<template>
  <div class="warning-rules">
    <div class="page-header">
      <h2>预警规则管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="addRule">
          <i class="el-icon-plus"></i> 新增规则
        </el-button>
      </div>
    </div>

    <el-table :data="rules" style="width: 100%" border>
      <el-table-column prop="name" label="规则名称" min-width="150"></el-table-column>
      <el-table-column prop="category" label="商品分类" width="120"></el-table-column>
      <el-table-column label="预警条件" min-width="200">
        <template slot-scope="scope">
          <div>库存低于 {{ scope.row.threshold }} {{ scope.row.thresholdType === 'quantity' ? '个' : '%' }}</div>
          <div v-if="scope.row.salesCondition">
            且近{{ scope.row.salesDays }}天销量超过{{ scope.row.salesThreshold }}个
          </div>
        </template>
      </el-table-column>
      <el-table-column label="预警级别" width="100">
        <template slot-scope="scope">
          <el-tag :type="getWarningLevelType(scope.row.level)">
            {{ getWarningLevelText(scope.row.level) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="通知方式" width="200">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.notifyEmail" size="small" style="margin-right: 5px">邮件</el-tag>
          <el-tag v-if="scope.row.notifySystem" size="small" type="success" style="margin-right: 5px">系统</el-tag>
          <el-tag v-if="scope.row.notifySMS" size="small" type="warning" style="margin-right: 5px">短信</el-tag>
          <el-tag v-if="scope.row.notifyWechat" size="small" type="info">微信</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="editRule(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteRule(scope.row)" class="danger-text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑规则对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="category">
          <el-select v-model="ruleForm.category" placeholder="请选择商品分类" style="width: 100%">
            <el-option label="全部商品" value="all"></el-option>
            <el-option v-for="cat in categories" :key="cat.value" :label="cat.label" :value="cat.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预警条件" required>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-input-number v-model="ruleForm.threshold" :min="0" style="width: 100%"></el-input-number>
            </el-col>
            <el-col :span="8">
              <el-select v-model="ruleForm.thresholdType" style="width: 100%">
                <el-option label="个" value="quantity"></el-option>
                <el-option label="%" value="percentage"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="销量条件">
          <el-switch v-model="ruleForm.salesCondition"></el-switch>
          <div v-if="ruleForm.salesCondition" style="margin-top: 10px">
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number v-model="ruleForm.salesDays" :min="1" placeholder="天数"></el-input-number>
              </el-col>
              <el-col :span="11">
                <el-input-number v-model="ruleForm.salesThreshold" :min="1" placeholder="数量"></el-input-number>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="预警级别" prop="level">
          <el-select v-model="ruleForm.level" style="width: 100%">
            <el-option label="提醒" value="info"></el-option>
            <el-option label="警告" value="warning"></el-option>
            <el-option label="紧急" value="critical"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知方式">
          <el-checkbox v-model="ruleForm.notifyEmail">邮件通知</el-checkbox>
          <el-checkbox v-model="ruleForm.notifySystem">系统通知</el-checkbox>
          <el-checkbox v-model="ruleForm.notifySMS">短信通知</el-checkbox>
          <el-checkbox v-model="ruleForm.notifyWechat">微信通知</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'WarningRules',
  data() {
    return {
      rules: [], // 规则列表
      dialogVisible: false,
      dialogTitle: '新增预警规则',
      ruleForm: {
        name: '',
        category: 'all',
        threshold: 10,
        thresholdType: 'quantity',
        salesCondition: false,
        salesDays: 7,
        salesThreshold: 5,
        level: 'warning',
        notifyEmail: true,
        notifySystem: true,
        notifySMS: false,
        notifyWechat: false,
        status: true
      },
      categories: [
        { label: '电子产品', value: 'electronics' },
        { label: '服装', value: 'clothing' },
        { label: '家居', value: 'home' }
      ],
      formRules: {
        name: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        level: [
          { required: true, message: '请选择预警级别', trigger: 'change' }
        ]
      },
      currentProduct: {
        image: 'https://m.media-amazon.com/images/I/71v0BQM2TYL._AC_SL1500_.jpg',
        // ... other fields
      }
    }
  },
  created() {
    this.fetchRules()
  },
  methods: {
    fetchRules() {
      // 模拟获取规则列表
      setTimeout(() => {
        this.rules = [
          {
            id: 1,
            name: '基础库存预警',
            category: 'all',
            threshold: 10,
            thresholdType: 'quantity',
            level: 'warning',
            notifyEmail: true,
            notifySystem: true,
            notifySMS: true,
            notifyWechat: false,
            status: true
          }
        ]
      }, 300)
    },
    getWarningLevelType(level) {
      const types = {
        info: 'info',
        warning: 'warning',
        critical: 'danger'
      }
      return types[level] || 'info'
    },
    getWarningLevelText(level) {
      const texts = {
        info: '提醒',
        warning: '警告',
        critical: '紧急'
      }
      return texts[level] || '未知'
    },
    addRule() {
      this.dialogTitle = '新增预警规则'
      this.ruleForm = {
        name: '',
        category: 'all',
        threshold: 10,
        thresholdType: 'quantity',
        salesCondition: false,
        salesDays: 7,
        salesThreshold: 5,
        level: 'warning',
        notifyEmail: true,
        notifySystem: true,
        notifySMS: false,
        notifyWechat: false,
        status: true
      }
      this.dialogVisible = true
    },
    editRule(row) {
      this.dialogTitle = '编辑预警规则'
      this.ruleForm = { ...row }
      this.dialogVisible = true
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 模拟提交
          setTimeout(() => {
            this.$message.success('保存成功')
            this.dialogVisible = false
            this.fetchRules()
          }, 300)
        }
      })
    },
    deleteRule(row) {
      this.$confirm('确认删除该预警规则吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 模拟删除
        this.$message.success('删除成功')
        this.fetchRules()
      })
    },
    handleStatusChange(row) {
      const action = row.status ? '启用' : '停用'
      this.$message.success(`${action}成功`)
    }
  }
}
</script>

<style lang="scss" scoped>
.warning-rules {
  padding: 20px;
  
  .danger-text {
    color: #F56C6C;
  }
}
</style> 